<template>
    <div class="common-layout">
        <el-container>
          <el-header>
              
              <el-row>
                 <el-col :span="22">
                     <h1 style="color: black;">His云医疗管理系统</h1>
                 </el-col>
                 <el-col :span="2">
                     <el-button style="margin-top: 50px;" @click="handlelogOut">退出登录</el-button>
                 </el-col>
              </el-row>
          </el-header>
          <el-container>
            <el-aside>
             
             <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                 <el-radio-button :label="false">展开</el-radio-button>
                 <el-radio-button :label="true">收起</el-radio-button>
             </el-radio-group>
             <el-menu
                 default-active="2"
                 class="el-menu-vertical-demo"
                 :router="true"
                 :collapse="isCollapse"
                 @open="handleOpen"
                 @close="handleClose"
             >
                 <!-- 遍历一级菜单 -->
                 <el-sub-menu v-for="menu in menuList" :key="menu.id" :index="menu.component" style="background-color:gainsboro;">
                     <template #title>
                         <el-icon><location /></el-icon>
                         <span>{{menu.name}}</span>
                     </template>
                     <!-- 一级菜单下的二级菜单 -->
                     <el-menu-item v-for="child in menu.children" 
                                 :key="child.id"
                                 active-text-color=""
                                 :index="'/main/'+child.component">
                                 <el-icon><icon-menu /></el-icon>
                                 <span>{{child.name}}</span>
                     </el-menu-item>
                 </el-sub-menu>
             </el-menu>
 
                 <!-- <el-menu 
                     :default-active="activeRoute" 
                     class="el-menu-vertical-demo"
                     router="true"
                     @select="menuSelect">
 
                     <el-menu-item index="/main/business">
                         <el-icon><icon-menu /></el-icon>
                         <span>商家管理</span>
                     </el-menu-item>
                     <el-menu-item index="/main/food">
                         <el-icon><Dish /></el-icon>
                         <span>餐品管理</span>
                     </el-menu-item>
                     <el-menu-item index="/main/user">
                         <el-icon><User /></el-icon>
                         <span>用户管理</span>
                     </el-menu-item>
                     <el-menu-item index="/main/address">
                         <el-icon><Location /></el-icon>
                         <span>地址管理</span>
                     </el-menu-item>
                     <el-menu-item index="/main/cart">
                         <el-icon><ShoppingCart /></el-icon>
                         <span>购物车管理</span>
                     </el-menu-item>
                     <el-menu-item index="/main/order">
                         <el-icon><List /></el-icon>
                         <span>订单管理</span>
                     </el-menu-item>
                 </el-menu> -->
                
            </el-aside>
            <el-main>
                <!-- 二级路由 -->
                <router-view/>
            </el-main>
          </el-container>
        </el-container>
      </div>
 </template>
 
 <script setup>
     import {onMounted, ref, getCurrentInstance, computed} from 'vue';
     import store from '@/store';
     import {
       Menu as IconMenu,
       Location,
       User,
       Dish,
       ShoppingCart,
       List,
       Document,
       Setting,
     } from '@element-plus/icons-vue'
     
     let {proxy} = getCurrentInstance();
 
     //展开菜单或收起
     const isCollapse = ref(false)
     const handleOpen = (key, keyPath) => {
         console.log(key, keyPath)
     }
     const handleClose = (key, keyPath) => {
         console.log(key, keyPath)
     }
 
     //当前登录上来的用户
     const user = ref({
         roleId: 1
     })
 
     //查到当前角色的菜单列表
     const menuList = ref([])
 
     /*
     查询当前角色菜单
     */
     const getMenu = ()=>{
 
         proxy.$axios({
             method: 'post',
             url: '/menu/tree',
             data: {
                 roleId: user.value.roleId
             }
         }).then(res=>{
           let resultBean = res.data;
           if(resultBean.code == 200){
             menuList.value = resultBean.data;
           }
         })
 
     }
 
     onMounted(()=>{
         getMenu();
     })
     
     //---------处理退出登录--------------
     //器本地存储中登录用户的信息
     //退出登录实现
      const handlelogOut = ()=>{
         window.localStorage.removeItem('adminUser');
        window.localStorage.removeItem('token');
        proxy.$router.push("/login");
     }
     
 </script>
 
 <style scoped>
     
     .common-layout{
         width: 100%;
         height: 800px;
     }
     
     .el-header{
         height: 80px;
         line-height: 80px;
         /* background-color:#409eff; */
     }
     
     .el-aside{
         width: 20%;
         height: 720px;
     }
     
 
     .el-menu-vertical-demo:not(.el-menu--collapse) {
         width: 200px;
         min-height: 400px;
     }
     
 </style>